// FloatBox 悬浮球样式 - 针对拖动优化的高性能样式
.float-box-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  // 悬浮球样式 - 优化拖动性能
  .float-ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    z-index: 10000;
    
    // 硬件加速，提升拖动性能
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    
    // 平滑过渡，但拖动时禁用（通过JS控制）
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    
    &:hover {
      box-shadow: 0 12px 40px rgba(102, 126, 234, 0.6);
      transform: translateY(-2px) translateZ(0);
    }
    
    &:active {
      transform: translateY(-1px) translateZ(0);
    }
    
    // 拖动状态样式
    &.dragging {
      cursor: grabbing !important;
      box-shadow: 0 16px 48px rgba(102, 126, 234, 0.8);
      transform: scale(1.05) translateZ(0);
      // 拖动时禁用过渡动画，提升性能
      transition: none !important;
      
      .float-ball-inner {
        transform: scale(0.95);
      }
    }
    
    // 展开状态样式
    &.expanded {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      
      .float-ball-inner {
        transform: rotate(45deg);
      }
    }
    
    // 内部图标容器
    .float-ball-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      transition: transform 0.2s ease;
      
      // 确保图标居中
      .anticon {
        font-size: 24px;
        color: white;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      }
      
      // 徽章样式优化
      .ant-badge {
        .ant-badge-dot {
          width: 8px;
          height: 8px;
          border: 2px solid white;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
  
  // 工具面板样式
  .float-panel {
    z-index: 9999;
    animation: slideInFromRight 0.3s ease-out;
    
    // 确保面板在屏幕边界内
    max-width: calc(100vw - 20px);
    
    .float-panel-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      
      // 卡片头部样式
      .ant-card-head {
        background: rgba(102, 126, 234, 0.1);
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        
        .ant-card-head-title {
          font-weight: 600;
          color: #4a5568;
        }
      }
      
      // 卡片内容样式
      .ant-card-body {
        padding: 16px;
        
        .tool-content {
          .ant-input,
          .ant-select,
          .ant-btn {
            border-radius: 8px;
          }
          
          .ant-btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            
            &:hover {
              background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
              box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
            }
          }
        }
      }
    }
  }
  
  // 动画定义
  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .float-ball {
      width: 50px;
      height: 50px;
      
      .float-ball-inner .anticon {
        font-size: 20px;
      }
    }
    
    .float-panel {
      .float-panel-card {
        .ant-card-body {
          padding: 12px;
        }
      }
    }
  }
  
  // 高对比度模式支持
  @media (prefers-contrast: high) {
    .float-ball {
      background: #000;
      border: 2px solid #fff;
      
      &.expanded {
        background: #333;
      }
    }
  }
  
  // 减少动画模式支持
  @media (prefers-reduced-motion: reduce) {
    .float-ball,
    .float-ball-inner,
    .float-panel {
      transition: none !important;
      animation: none !important;
    }
  }
}

// 深色主题适配
[data-theme='dark'] {
  .float-box-container {
    .float-panel {
      .float-panel-card {
        background: rgba(45, 55, 72, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        
        .ant-card-head {
          background: rgba(102, 126, 234, 0.2);
          border-bottom-color: rgba(102, 126, 234, 0.3);
          
          .ant-card-head-title {
            color: #e2e8f0;
          }
        }
      }
    }
  }
}